<template>
  <div class="book-store h-screen bg-no-repeat" id="content">
    <div class="header w-full p-3">
      <van-search class="search-box" ref="searchBox" id="searchBox"
                  v-model="searchValue"
                  shape="round"
                  left-icon=""
                  right-icon="search"
                  background="transparent"
                  :clearable="false"
                  placeholder="请输入"
      />
    </div>
    <van-tabs v-model:active="activeTab" animated sticky :background="tabbackground">
      <van-tab v-for="item in tabList" :title="item.title" :key="item.id" :title-lass="tabClass">
        <div v-show="activeTab === 0" class="grid grid-cols-3 gap-4 p-3">
          <div v-for="item in bookList" :key="item.id" @click="viewBookInfo(item)">
            <bookFrameBox :info="item"></bookFrameBox>
          </div>
        </div>
        <div v-show="activeTab === 1">
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, toRefs} from 'vue'
import {useIntersectionObserver} from '@vueuse/core'
import png1 from '../assets/image/41.png'
import png2 from '../assets/image/right-item.png'
import png3 from '../assets/image/2.jpeg.png'
import png4 from '../assets/image/left-item.png'
import png5 from '../assets/image/42.png'
const searchValue = ref('')
const tabbackground = ref('transparent')
const activeTab = ref(0)
const searchBox = ref(null);
const reactiveData = reactive({
  tabList: [
    {
      id: 1,
      title: '我的书架'
    },
    {
      id: 2,
      title: '书店商城'
    },
  ],
  tabClass: {
    fontWeight: 'bold'
  },
  bookList: []
})

const {tabList, tabClass, bookList} = toRefs(reactiveData)

onMounted(() => {
  // 检查searchbox可视度
  const {stop} = useIntersectionObserver(
      searchBox,
      ([{isIntersecting}], observerElement) => {
        tabbackground.value = isIntersecting ? 'transparent' : '#f3f4f6f7'
      }
  )
  getBookList()
})

const getBookList = () => {
  reactiveData.bookList = [
    {
      id: 1,
      bookName: '深时之旅',
      bookRemark: '18章/87章',
      book_cover_small: png1
    },
    {
      id: 2,
      bookName: '保护野生动物',
      bookRemark: '7章/102章',
      book_cover_small: png2
    },
    {
      id: 3,
      bookName: '森林之火',
      bookRemark: '10章/337章',
      book_cover_small: png3
    },
    {
      id: 4,
      bookName: '假日海滩',
      bookRemark: '已读完',
      book_cover_small: png4
    },
    {
      id: 5,
      bookName: '电影人生',
      bookRemark: '7章/102章',
      book_cover_small:png5
    },
    {
      id: 1,
      bookName: '深时之旅',
      bookRemark: '18章/87章',
      book_cover_small: png1
    },
    {
      id: 2,
      bookName: '保护野生动物',
      bookRemark: '7章/102章',
      book_cover_small: png2
    },
    {
      id: 3,
      bookName: '森林之火',
      bookRemark: '10章/337章',
      book_cover_small: png3
    },
    {
      id: 4,
      bookName: '假日海滩',
      bookRemark: '已读完',
      book_cover_small: png4
    },
    {
      id: 5,
      bookName: '电影人生',
      bookRemark: '7章/102章',
      book_cover_small:png5
    },
  ]
}
</script>

<style lang="scss">
//:root{
//  --van-font-weight-bold: 700;
//}
.book-store {
  background-image: url("../assets/image/bg-index.png");
  background-size: 100% 100%;

  .header {

  }
}
</style>
